<template>
  <el-dialog
    :title="isDetail ? '投诉详情' : '投诉处理'"
    :visible.sync="visiable"
    :show-close="false"
    :close-on-click-modal="false"
    width="600px"
  >
    <div class="complain">
      <DetailItem labelWidth="100px" label="投诉时间：" :value="detail.createTime" />
      <DetailItem labelWidth="100px" label="任务号：" :value="detail.no" />
      <DetailItem v-if="detail.driver" labelWidth="100px" label="驾驶员：" :value="detail.driver && detail.driver.name" />
      <DetailItem labelWidth="100px" label="投诉内容：" :value="detail.content" />
      <DetailItem
        v-if="isDetail"
        labelWidth="100px"
        label="结果反馈："
        :value="detail.replyContent"
      />
      <DetailItem
        v-if="isDetail"
        labelWidth="100px"
        label="反馈时间："
        :value="detail.replyTime"
      />
      <el-form
        v-else
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
      >
        <el-form-item label="反馈模板：">
          <div class="model-select mb-20">
            <el-select class="inp-short" v-model="model" @change="onModelChange" placeholder="请选择反馈模板">
              <el-option
                v-for="item in templates"
                :key="item.id"
                :value="item.id"
                :label="item.name"
              ></el-option>
            </el-select>
            <el-link type="primary" :underline="false" @click="configTemp">模板配置</el-link>
          </div>
        </el-form-item>
        <el-form-item label="结果反馈：" prop="replyContent">
          <el-input
            v-model="form.replyContent"
            type="textarea"
            class="inp-full"
            :rows="5"
            :maxlength="300"
            show-word-limit
            placeholder="请输入反馈结果"
          ></el-input>
        </el-form-item>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button v-if="!isDetail" size="big" type="primary" @click="submit">提交</el-button>
      <el-button size="big" @click="hide">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import DetailItem from '../Detail/DetailItem.vue'
import * as ComplainAction from '@/api/complain'

export default {
  components: {
    DetailItem
  },
  props: {
    templates: Array
  },
  data () {
    return {
      visiable: false,
      currentId: null,
      model: null,
      form: {},
      rules: {
        replyContent: [{ required: true, message: '请输入反馈结果', trigger: 'change' }]
      },
      detail: {},
      operation: 'edit'
    }
  },
  computed: {
    isDetail () {
      return this.operation === 'detail'
    }
  },
  methods: {
    show (id, type, operation) {
      this.form = {}
      this.model = null
      this.$refs.form && this.$refs.form.clearValidate()
      this.visiable = true
      this.getDetail(id, type)
      this.currentId = id
      this.operation = operation === 'handle' ? operation : 'detail'
    },
    hide () {
      this.form = {}
      this.model = null
      this.$refs.form && this.$refs.form.clearValidate()
      this.visiable = false
    },
    onModelChange (id) {
      const template = this.templates.find(item => item.id === id)
      this.$set(this.form, 'replyContent', template.content)
    },
    async getDetail (id, type) {
      const res = await ComplainAction.select({ id, type })
      if (res) {
        this.detail = res
      }
    },
    submit () {
      this.$refs.form.validate(async valid => {
        if (!valid) return false
        const param = {
          ...this.form,
          id: this.currentId
        }
        if (param.replyContent.length > 300) {
          return this.$message.warning('反馈结果超出最大长度！')
        }
        const res = await ComplainAction.update(param)
        if (res) {
          this.$message.success('提交成功！')
          this.visiable = false
          this.$emit('reload')
        }
      })
    },
    configTemp () {
      this.$router.push('/feedback/complaintManage/addTemplate')
    }
  }
}
</script>

<style lang="scss" scoped>
.complain {
  .model-select {
    display: flex;
    justify-content: space-between;
  }

  ::v-deep .el-form-item__label {
    padding-right: 0;
    color: #303133;
  }
}
</style>
